<template>
  <footer class="chat-footer-wrap">
    <div class="input-wrap">
      <textarea v-model="searchKey" placeholder="请输入问题"></textarea>
    </div>
    <div class="button" @click="send" v-loading="sendLock">点击发送</div>
  </footer>
</template>

<script setup lang="ts">
import { ref } from "vue";

type Props = {
  sendLock: boolean;
}
const props = defineProps<Props>();
const emits = defineEmits(["send"]);
const searchKey = ref("");
const send = () => {
  if (props.sendLock) return ElMessage.warning("等待响应结果");
  if (searchKey.value.trim().length) {
    emits('send', searchKey.value);
    searchKey.value = "";
  } else {
    ElMessage.error("请输入内容");
  }
}
</script>

<style lang="scss" scoped>
.chat-footer-wrap {
  height: 140px;
  display: flex;
  background: #fff;
  box-shadow: 0 -5px 10px 0 rgba(32,49,59, .05);
  padding: 15px 30px;
  .input-wrap {
    flex: 1;
  }
  textarea {
    width: 100%;
    height: 100%;
    resize: none;
    outline: unset;
    font-size: 16px;
    color: #666;
  }
  .button {
    background: var(--main-color);
    color: #fff;
    padding: 0 15px;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    margin-left: 15px;
    font-size: 16px;
    cursor: pointer;
    transition: all .3s ease;
    &:hover {
      background: rgb(0, 120, 122);
    }
  }
}
</style>